<template>
	<view class="wapper content">
		<!-- 第一部分 信息 -->
		<view class="info">
			<view>
				<!-- 店名 -->
				<view class="name">
					<view class="orange">源小茶天府新谷店</view>
					<image class="picon" src="../../static/dayu.png" mode=""></image>
				</view>
				<!-- 定位 -->
				<view class="location">
					<image class="picon" src="../../static/dw.png" mode=""></image>
					<view>距离您100m</view>
				</view>
			</view>
			<image class="logo" src="../../static/logo1.png" mode=""></image>
		</view>
		<!-- 第二部分 轮播图 -->
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="300" circular>
			<swiper-item v-for="image in bannerProductData">
				<image :src="httpImageUrl+image.iurl" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 第三部分 点餐 -->
		<view class="order">
			<!-- 左边部分：奶茶分类 -->
			<view class="types">
				<!-- 其中一个分类信息 -->
				<view class="type" :class="{'selected':ptype.id==currentId}" v-for="ptype in types"
					@click="changeCurrentId(ptype.id)">
					<image :src="httpImageUrl+ptype.timageurl" mode=""></image>
					<view>{{ptype.typename}}</view>
				</view>
			</view>
			<!-- 右边部分：产品  productData -->
			<view class="productData">
				<!-- 分类名称 -->
				<view v-if="productData.length>0" class="typename">{{productData[0].type.typename}}</view>
				<scroll-view style="height: 900rpx;" scroll-y="true" class="scroll-Y mt40">
					<!-- 其中一个产品 -->
					<view class="product" v-for="product in productData">
						<image :src="httpImageUrl+product.pimageurl" mode=""></image>
						<!-- 右侧描述信息 -->
						<view class="ml10">
							<view class="pname">{{product.pname}}</view>
							<view class="tintroduce mt10">{{product.tintroduce}}</view>
							<view class="mt10 cart">
								<view>￥<text class="tprice">{{product.tprice}}</text> <text
										style="font-size: 20rpx;color: #999;" class="ml10">起</text> </view>
								<image @click="addCart(product.id,product.tprice)" src="../../static/cart.png" mode="">
								</image>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerProductData: [],
				types: [],
				currentId: 1,
				productData: [],
			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: "token", // token是用户已登录的凭证，登录成功后才可添加购物车和下单
				success(res) {
					console.log("token = ", res.data);
					//1.获取轮播图信息
					uni.request({
						url: that.httpUrl + 'image/queryImageByType', //仅为示例，并非真实接口地址。
						data: {
							imageType: '3',
							token: res.data,
				 	},
						header: {
					 	'custom-header': 'application/json', //自定义请求头信息
							// 请求头带上tokenId 权限管理
							// "Authorization": "Bearer " + res.data.tokenId
						},
						success: (reqResult) => {
							console.log("获取轮播图信息", reqResult.data);
							that.bannerProductData = reqResult.data.data
						}
					});
					//2.获取分类信息  所有的
					uni.request({
						url: that.httpUrl + 'type/getTypes', //仅为示例，并非真实接口地址。
						data: {
							token: res.data,
						},
						header: {
							'custom-header': 'application/json', //自定义请求头信息
							// 请求头带上tokenId 权限管理
							// "Authorization": "Bearer " + res.data.tokenId
						},
						success: (reqResult) => {
							console.log("获取分类信息：", reqResult.data);
							that.types = reqResult.data.data
						}
					});
					//3.根据类型id 获取奶茶信息（默认查询id=1的）
					uni.request({
						url: that.httpUrl + 'product/queryProductByType', //仅为示例，并非真实接口地址。
						data: {
							id: that.currentId,
							token: res.data,
				  },
						header: {
					  'custom-header': 'application/json', //自定义请求头信息
							// 请求头带上tokenId 权限管理
							// "Authorization": "Bearer " + res.data.tokenId
						},
						success: (reqResult) => {
							console.log("获取奶茶信息", reqResult.data);
							that.productData = reqResult.data.data
						}
					});

				}
			});

		},
		onShow(){
			
		},
		methods: {
			//点击分类时
			changeCurrentId(id) {
				console.log("id = ", id)
				this.currentId = id
				var that = this;
				uni.getStorage({
					key: "token", // token是用户已登录的凭证，登录成功后才可添加购物车和下单
					success(res) {
						uni.request({
							url: that.httpUrl + 'product/queryProductByType', //仅为示例，并非真实接口地址。
							data: {
								id: that.currentId,
								token: res.data,
							},
							header: {
								'custom-header': 'application/json', //自定义请求头信息
								// 请求头带上tokenId 权限管理
								// "Authorization": "Bearer " + res.data.tokenId
							},
							success: (reqResult) => {
								console.log("获取奶茶信息", reqResult.data);
								that.productData = reqResult.data.data
							}
						});
					}
				});
				
			},
			//addCart 点击添加购物车
			addCart(id, tprice) {
				console.log("需要添加商品，", id);
				var that = this;
				uni.getStorage({
					key: "token", // token是用户已登录的凭证，登录成功后才可添加购物车和下单
					success(res) {
						console.log("token = ", res.data);
						uni.request({
							url: that.httpUrl + 'cart/addCart', //仅为示例，并非真实接口地址。
							data: {
								pid: id,
								number: 1
								// tprice:tprice // 多余了
							},
							method: 'POST',
							header: {
								'access-header': res.data, //自定义请求头信息
								// 请求头带上tokenId 权限管理
								// "Authorization": "Bearer " + res.data.tokenId
							},
							success: (reqResult) => {
						 	if (reqResult.data.code != '0') {
									uni.showToast({
										title: reqResult.data.msg,
										icon: "error",
										duration: 1500
									});
								} else {
									uni.showToast({
										title: reqResult.data.msg,
										icon: 'success',
										duration: 1500
									});
								}

							}
						});
					}
				})

			}
		}
	}
</script>

<style>
	/* 第一部分 */
	.info {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		border-bottom: 1px solid #999;
		padding-bottom: 10rpx;
	}

	.picon {
		width: 40rpx;
		height: 40rpx;
	}

	.name {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx 40rpx;
	}

	.location {
		display: flex;
		align-items: center;
		padding: 0rpx 40rpx;
		font-size: 26rpx;
		color: #999;
	}

	.logo {
		width: 200rpx;
		height: 100rpx;
	}

	/* 第二部分 */
	swiper image {
		width: 100%;
		height: 100%;
	}

	.wapper,
	uni-page-body {
		width: 100%;
		height: 100%;
	}

	swiper {
		height: 300rpx;
		margin-top: 20rpx;
	}

	/* 第三部分  */
	.order {
		margin-bottom: 100rpx;
		display: flex;
	}

	.types {
		margin-top: 40rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #999;
	}

	.types .type {
		padding: 34rpx 10rpx;
	}

	.type {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 200rpx;
		height: 120rpx;
		background-color: #f5f5f5;
	}

	.type image {
		width: 60rpx;
		height: 60rpx;
	}

	.selected {
		background-color: #fff;
		color: orange;
	}

	/* 产品部分 */
	.typename {
		color: #999;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.product {
		margin-left: 20rpx;
		margin-top: 20rpx;
		display: flex;
	}

	.product image {
		width: 200rpx;
		height: 200rpx;
	}

	.tintroduce {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 可以显示的行数，超出部分用...表示*/
		-webkit-box-orient: vertical;
		color: #999;
		font-size: 30rpx;
	}

	.pname {
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 260rpx;
	}

	.tprice {
		font-weight: bold;
		color: orange;
		font-size: 40rpx;
	}

	.addCart {
		font-size: 30rpx;
	}

	.cart {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 40rpx;
	}
</style>
